<template>
	<view class="uy-title" :style="{'margin': margin + 'rpx'}">
		<view class="uy-con-box">
			<view class="uy-left">
				<view class="uy-left-dec" :style="{'background': backgroundColor}" v-if="showDec">
				</view>
				<view :class="{'font-weight': fontWeight}" :style="{'font-size': fontSize + 'rpx', 'color': leftColor}">
					{{leftText || ''}}
					<slot name="left" />
				</view>
			</view>
			<view class="uy-right" :style="{color: rightColor}" @tap="$emit('clickRight')">
				{{rightText || ''}}
				<slot name="right" />
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * @description  板块标题组件
	 * @property {String} leftText  左侧文本  
	 * @property {String} leftColor  自定义左侧字体颜色  
	 * @property {Boolean} showDec 是否显示左侧装饰 默认true
	 * @property {String}  backgroundColor  自定义左侧装饰颜色 
	 * @property {Boolean} fontWeight 字体自重  默认true 
	 * @property {String} rightText  右侧文本
	 * @property {String} rightColor 自定义右侧字体颜色  
	 * @property {String || Number} fontSize  字体大小  单位rpx
	 * @property {String || Number} margin  组件左右间距  默认30  单位rpx   
	 * @event {Function} rightClick  右侧点击事件  
	 */
	export default {
		name: "uni-title",
		props: {
			leftText: {
				type: String,
				default: ''
			},
			leftColor: {
				type: String,
				default: ''
			},
			rightText: {
				type: String,
				default: ''
			},
			rightColor: {
				type: String,
				default: '#999999'
			},
			showDec: {
				type: Boolean,
				default: true
			},
			backgroundColor: {
				type: String,
				default: '#FF4E03'
			},
			fontWeight: {
				type: Boolean,
				default: true
			},
			fontSize: {
				type: [String, Number],
				default: 30
			},
			margin: {
				type: [Number || String],
				default: 0
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.uy-title {
		position: relative;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
	
	.uy-con-box {
		display: flex;
		/* #ifdef APP-NVUE */
		flex-direction: row;
		/* #endif */
		align-items: center;
		justify-content: space-between;
	}
	
	.uy-left {
		display: flex;
		/* #ifdef APP-NVUE */
		flex-direction: row;
		/* #endif */
		align-items: center;
	}
	
	.uy-left-dec {
		width: 6rpx;
		border-radius: 30rpx;
		height: 34rpx;
		margin-right: 10rpx;
	}
	
	.font-weight {
		font-weight: bold;
	}
	
	.uy-right {
		font-size: 24rpx;
	}
</style>